<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>积分后台管理</title>
		<link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />
	</head>
	<body>
<div id="top">

</div>
		<div class="body content"  id="app">
			<div id="left">

			</div>

			<div class="right">

				<div class="liebie_title style_hei_16">
					<img src="img/xiugai.png">发布公告
				</div>
        <div class="bottom">

            <div class="zijin_zhuru_top style_hei_14">
                <div class="zijin_zhuru_list zijin_zhuru_list_daili">
                    <p>&ensp;&ensp;<span class="style_hong_12">*</span>标题：</p><input type="text" v-model="title" placeholder="请输入标题" class="add_xuan"/>
                </div>
                <div class="zijin_zhuru_list zijin_zhuru_list_daili dis_flex neirong">
                    <p>&ensp;&ensp;<span class="style_hong_12">*</span>内容：</p>
                    <iframe id="face" src="bianjiqi/editor.html" style="border:0px; width:800px; height:300px;"></iframe>
                    <textarea id="information" name="information" :value="information" style="display:none">
                        
                    </textarea>
                </div>
                <div class="queren_tijiao " @click="tijiao()">
                    确认提交
                </div>
            </div>


    

            <!--------列表开始-------->
            <table width="100%" align="center" class="tab_top baoguo " border="0" cellspacing="0" cellpadding="0">
                <tr style="background-color: #FAFAFA;">
                    
                    <td align="center" class="" width="80px">序号</td>
                    <td align="left" class="">标题</td>
                    
                    <td align="left" class="">创建时间</td>
                    <td align="center" class="" width="150px">操作</td>
                </tr>
                
                <tr align="center" v-for="(item,index) in list"  v-cloak>
                    
                    <td align="center" class="">{{index+1}}</td>
                    <td align="left" class="">{{item.title}}</td>
                    
                    <td align="left" class="">{{item.created_at}}</td>
                    <td align="center" class=" style_lv_9 caozuo" >
                    	   <div class="dd_caozuo style_hong_14">
                    		   
                    	   	 <p  @click="bianji(item)">编辑</p>
                    		 <p  @click="del(item.id)">删除</p>
                    	   </div>
                    </td>
					
                </tr>
                
            </table>


            <!--------分页列表开始-------->
           <ul class="pagination" v-cloak>
           	<li @click="xuanye(item)" v-for="item in pageCount" :class="item==page?'pagination_on':''">{{item}}</li>
           </ul>


        </div>
			</div>
		</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fengzhuang.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gong.js"></script>
<script src="js/vue.js"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:10,
			pageCount:0,
			title:'',
			gonggaoId:'',
			information:''
	    },
		mounted(){
			this.get_list()
		},
		methods:{
			xuanye(page){
				this.page=page
				this.get_list()
			},
			bianji(item){
				this.title=item.title
				this.information=item.content
				this.gonggaoId=item.id
				$("#face").attr('src','bianjiqi/editor.html?v=1.1.2');
				
    
				//  $("body,html").animate({
				//                 //html是最外层标签，可以代表整个页面；body 是它二级标签，可以用它代表页面的文档部分
				//                 // "body,html"都写上，兼容多浏览器
				//                 scrollTop: 0
				// }, 500);//500是滚动到顶部所需要的时间0.5秒
					
			},
			tijiao() {
			    var information= $("#information").val();
			    if (!this.title) {
			        
					layer.msg('请输入标题')
			        return false;
			    }
			  
			    if (information == '') {
					layer.msg('请输入公告内容')
			        return false;
			    }
			    
			
			    var api_src='/api/createAnnouncement'
				var type='post'
				if(this.gonggaoId){
					var api_src='/api/getAnnouncements/'+this.gonggaoId
					type='put'
				}
				$.ajaxDirect(api_src,type,{
					title: this.title,
					content:information
				},
				 (obj)=> {
						  if(obj.code==200){
							  
							 layer.msg(obj.message)
							 setTimeout(()=>{
								 history.go(0);
								 
							 },500)
				
						  }
				},
				(err)=> {
				        //发送失败
				})
				
				
			
			},
			del(id){
			    $.ajaxDirect("/api/getAnnouncements/"+id,'delete',{
			    	
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  
							  layer.msg('公告已删除')
							  setTimeout(()=>{
							  		history.go(0);
							  								 
							  },500)
			
			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			},
			get_list(){
			    $.ajaxDirect("/api/getAnnouncements",'get',{
			    	'page':this.page,
			    	'limit':this.limit
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  
			    			  this.list=obj.rows
							  this.pageCount=Math.floor(Number(obj.totalCount)/this.limit)

			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			}
	
		}
	})	
</script>
<script type="text/javascript">
    $('.filter-box').selectFilter({
        callBack: function (val) {
            //返回选择的值
            console.log(val + '-是返回的值')
        }
    });

	// localStorage.setItem('token', 'John Doe');
    // sessionStorage.setItem('token', 'John Doe');
	 // $.ajaxDirect("/api/getAllProducts",'GET',{},
	 //     function (data) {
	 //         //发送成功
	 //     },
	 //     function (data) {
	 //         //发送失败
	 //     }
	 // )
	 
    function upload_zheng() {
        $(".img_zheng").text('')
        var files = $('#shenfen_zheng').get(0).files;

        for (var i = 0; i < files.length; i++) {
            var r = new FileReader();
            r.onload = function () {
                var tag = ` <img class='ossimg' src='${this.result}'  alt=''>`
                $(".img_zheng").append(tag)
            };
            r.readAsDataURL(files[i]);
        }
    }

    // //确认提交
    function tijiao() {
        var title = $("#title").val();
        var state=$('input[name="state"]:checked').val()
        var information= $("#information").val();
        if (title == '') {
            layer.open({content: '请输入标题'});
            return false;
        }
        if (state == '') {
            layer.open({content: '请选择公告类型'});
            return false;
        }
        if (information == '') {
            layer.open({content: '请输入公告内容'});
            return false;
        }
        var data = '';
        if($_GET['noticeid']){
            data = {title: title, state: state, information: information,noticeid:$_GET['noticeid']}
        }else{
            data = {title: title, state: state, information: information}
        }
        $.ajax({
            type: 'POST',
            url: '/zuadmin/site/notice',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                layer.load(1, {shade: [0.5, '#fff']}); //加载中 0代表加载的风格，支持0-2
            },
            complete: function () {
                layer.closeAll('loading');//关闭加载中
            },
            success: function (data) {
                var obj = eval(data);
                if (obj.code == 0) {
                    layer.open({content: obj.message});
                    window.location.href = window.location.pathname;
                } else {
                    layer.open({content: obj.message});
                }

            },
            error: function (xhr, type) {
                layer.open({content: '错误'});
            }
        });
    }


    $('.queding').on("click", function () {
        var str = [];
        $("input[name='check']:checked").each(function (index, item) {
            str.push($(this).val())
        });
        var menu = $('select[name="filter"]').val();
        console.log(str, menu)
        if(menu == 'del'){
            $.ajaxDirect('/api/getAnnouncements/'+str.toString(),'delete',{
            	   
            },
             (obj)=> {
            		  if(obj.code==200){
            			  
            			 layer.msg(obj.message)
            			 history.go(0);
            
            		  }
            },
            (err)=> {
                    //发送失败
            })
        }else{
            layer.open({content:'请选择正确操作'});
        }
    });

</script>

<script type="text/javascript">
    $('#quanxuan').click(function () {
        var flag = $(this).is(":checked");
        console.log(flag)
        $(":checkbox[name='check']").prop("checked", flag);
    })
    $('.tab_xuanze').click(function () {
        var flag = true;
        var tbodyO = $('.tab_xuanze')

        for (var j = 0; j < tbodyO.length; j++) {
            //只要存在没被勾选的复选框
            if (!tbodyO[j].checked) {
                //判断标识为假，不影响全选框
                flag = false;
                break;
            }
        }
        $('#quanxuan').prop("checked", flag)
    })
</script>
	</body>
</html>